<%@ page language="java" contentType="text/html; charset=utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
	<title>商品列表</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<link type="text/css" rel="stylesheet" href="css/bootstrap.css">
	<link type="text/css" rel="stylesheet" href="css/style.css">
	<style>
		/* 商品列表页面样式 */
		.products {
			padding: 40px 0;
			background: #f8f9fa;
		}
		
		.container {
			max-width: 1400px;
			margin: 0 auto;
			padding: 0 20px;
		}
		
		.page-title {
			font-size: 28px;
			font-weight: 600;
			color: #333;
			margin-bottom: 30px;
			text-align: center;
		}
		
		/* 商品网格布局 */
		.product-grid-container {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
			gap: 25px;
			margin-bottom: 40px;
		}
		
		/* 商品卡片样式 */
		.product-card {
			background: white;
			border-radius: 12px;
			box-shadow: 0 2px 10px rgba(0,0,0,0.08);
			overflow: hidden;
			transition: transform 0.3s ease, box-shadow 0.3s ease;
			display: flex;
			flex-direction: column;
		}
		
		.product-card:hover {
			transform: translateY(-5px);
			box-shadow: 0 5px 20px rgba(0,0,0,0.12);
		}
		
		/* 商品图片容器 */
		.product-image {
			position: relative;
			padding-bottom: 100%;
			overflow: hidden;
		}
		
		.product-image img {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			transition: transform 0.3s ease;
		}
		
		.product-card:hover .product-image img {
			transform: scale(1.05);
		}
		
		/* 查看详情按钮 */
		.view-details {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			background: rgba(255,255,255,0.95);
			color: #333;
			padding: 12px 24px;
			border-radius: 6px;
			font-size: 15px;
			font-weight: 500;
			opacity: 0;
			transition: all 0.3s ease;
			border: none;
			cursor: pointer;
			text-decoration: none;
		}
		
		.product-card:hover .view-details {
			opacity: 1;
		}
		
		/* 商品信息样式 */
		.product-info {
			padding: 20px;
			display: flex;
			flex-direction: column;
			flex-grow: 1;
		}
		
		.product-name {
			font-size: 16px;
			font-weight: 600;
			color: #333;
			margin: 0 0 15px;
			line-height: 1.4;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		
		.price-cart-container {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: auto;
		}
		
		.product-price {
			font-size: 20px;
			font-weight: bold;
			color: #ff4757;
		}
		
		.product-price:before {
			content: "¥";
			font-size: 16px;
			margin-right: 2px;
		}
		
		.add-to-cart {
			background: #4CAF50;
			color: white;
			border: none;
			padding: 8px 16px;
			border-radius: 4px;
			font-size: 14px;
			cursor: pointer;
			transition: background 0.3s ease;
		}
		
		.add-to-cart:hover {
			background: #45a049;
		}
		
		/* 分页样式 */
		.pagination-container {
			margin-top: 40px;
			display: flex;
			justify-content: center;
		}
		
		.pagination {
			display: flex;
			gap: 8px;
			align-items: center;
			flex-wrap: wrap;
			justify-content: center;
		}
		
		.pagination a,
		.pagination span {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			min-width: 36px;
			height: 36px;
			padding: 0 12px;
			border-radius: 6px;
			font-size: 14px;
			font-weight: 500;
			text-decoration: none;
			transition: all 0.3s ease;
		}
		
		.pagination a {
			background: white;
			color: #333;
			border: 1px solid #dee2e6;
		}
		
		.pagination a:hover {
			background: #f8f9fa;
			border-color: #adb5bd;
			color: #1a1a1a;
		}
		
		.pagination .active {
			background: #4CAF50;
			color: white;
			border: 1px solid #4CAF50;
		}
		
		.pagination .disabled {
			background: #f8f9fa;
			color: #adb5bd;
			border: 1px solid #dee2e6;
			cursor: not-allowed;
		}
		
		/* 响应式调整 */
		@media (max-width: 768px) {
			.container {
				padding: 0 15px;
			}
			
			.product-grid-container {
				grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
				gap: 15px;
			}
			
			.product-info {
				padding: 15px;
			}
			
			.product-name {
				font-size: 14px;
				margin-bottom: 12px;
			}
			
			.product-price {
				font-size: 18px;
			}
			
			.add-to-cart {
				padding: 6px 12px;
				font-size: 13px;
			}
			
			.pagination a,
			.pagination span {
				min-width: 32px;
				height: 32px;
				padding: 0 10px;
				font-size: 13px;
			}
		}
	</style>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/simpleCart.min.js"></script>
	<script type="text/javascript" src="layer/layer.js"></script>
	<script type="text/javascript" src="js/cart.js"></script>
</head>
<body>
	
	<jsp:include page="header.jsp"/>
	
	<!--products-->
	<div class="products">	 
		<div class="container">
			<h2 class="page-title">
				<c:choose>
					<c:when test="${type != null}">
						${type.name}
					</c:when>
					<c:otherwise>
						<c:if test="${typeid==2}">热销推荐</c:if>		
						<c:if test="${typeid==3}">新品推荐</c:if>
					</c:otherwise>
				</c:choose>
			</h2>
			
			<div class="product-grid-container">
				<c:forEach var="good" items="${goodList}">
					<div class="product-card">
						<a href="detail?goodid=${good.id}" class="product-image">				
							<img src="../${good.cover}" alt="${good.name}">
							<button class="view-details">查看详情</button>
						</a>				
						<div class="product-info">
							<h3 class="product-name">${good.name}</h3>								
							<div class="price-cart-container">
								<span class="product-price">${good.price}</span>
								<button class="add-to-cart" onclick="buy(${good.id})">加入购物车</button>
							</div>
						</div>
					</div>
				</c:forEach>
			</div>
			
			<div class="pagination-container">
				${pageTool}
			</div>
		</div>
	</div>
	<!--//products-->	
	
	<jsp:include page="footer.jsp"/>

</body>
</html>